<template>
	<div class="result-list">
		<div class="h-[24px] flex items-center text-[11px] text-[#898989] border-b-[1px] border-solid border-[#ddd]">
			<div class="w-[50px] text-center">期号</div>
			<div class="flex-1 w-0 flex items-center">
				<template v-for="item in theader">
					<div class="w-[32px] text-[10px] flex items-center justify-center">
						{{ item }}
					</div>
				</template>
				<div class="w-[24px] flex items-center justify-center"></div>
				<div class="w-[32px] flex items-center justify-center">特码</div>
				<div class="flex-1 w-0 flex items-center justify-center">特码大小单双</div>
			</div>
		</div>
		<div class="grow-[1] h-[calc(100%_-_24px)] overflow-auto">
			<scroll-list v-model:loading="state.loading" :finished="state.finished" :length="state.list.length"
				:showFinished="false">
				<template v-for="(item, index) in state.list">
					<div class="w-full h-[40px] py-[4px] flex items-center" :class="{
						'bg-[#eee]': index % 2 != 0
					}">
						<div class="w-[50px] text-center text-[14px] text-[#666]">
							{{ item.BitchNo.substr(-5) }}
						</div>
						<div class="flex-1 w-0 flex items-center">
							<template v-for="(num, i) in extendedRes(item).zhengma">
								<div class="w-[32px] flex flex-col items-center justify-center">
									<lhc-ball type="big" :num="Number(num)"></lhc-ball>
									<div class="leading-none text-[10px] mt-[2px]">
										{{ extendedRes(item).zhengma_sx[i] }}
									</div>
								</div>
							</template>
							<div class="flex flex-col justify-center items-center">
								<div class="w-[24px] h-[24px] flex justify-center items-center">
									<svg-icon class="w-[9px] h-[9px]" name="plus"></svg-icon>
								</div>
								<div class="h-[10px]"></div>
							</div>
							<div class="w-[32px] flex flex-col items-center justify-center">
								<lhc-ball type="big" :num="Number(extendedRes(item).tema)"></lhc-ball>
								<div class="leading-none text-[10px] mt-[2px]">
									{{ extendedRes(item).tema_sx }}
								</div>
							</div>
							<div class="flex-1 w-0 flex items-center justify-center">
								<div class="text-red" :class="{
									'text-blue': extendedRes(item).tema_dx == '小'
								}">
									{{ extendedRes(item).tema_dx }}
								</div>
								<div class="text-red ml-[10px]" :class="{
									'text-blue': extendedRes(item).tema_ds == '单'
								}">
									{{ extendedRes(item).tema_ds }}
								</div>
							</div>
						</div>
					</div>
				</template>
			</scroll-list>

		</div>
		<div class="border-top py-[12px] flex justify-center items-center text-[14px] text-blue"
			v-if="state.list.length > 0" @click="$router.push(`/admin/openresult?gameId=${roomState.gameId}`)">
			<span class="mr-[4px]">查看更多</span>
			<img class="w-[12px]" src="@/assets/images/history-more.png" />
		</div>
	</div>
</template>
<script lang="ts" setup>
import $bus from "@/utils/bus";
import { useResult } from "../hooks/use-result";
import { lhcSumLH } from "@/utils/game";
import { debounce } from "lodash-es";
const { roomState, lhcBall, scrollList, state, getData, refresh, getlotteryCode } = useResult();

const theader = ["正1", "正2", "正3", "正4", "正5", "正6"];

const extendedRes = (item: HistoryMo) => {
	return lhcSumLH(getlotteryCode(item));
};

onMounted(() => {
	getData();
	// 监听开奖推送
	$bus.on(
		"open-result-complete",
		debounce(() => {
			refresh();
		}, 500)
	);
});
</script>
<style lang="scss" scoped>
.result-list {
	position: absolute;
	top: 88px;
	left: 0%;
	width: 100%;
	height: 230px;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	border-top: 1px solid #eee;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
</style>
